<template>
	<view class="projectDetails ff-font-14 ff-padding-bottom-15">
		<view class="projectDetails-header">
			<image class="projectDetails-header-bg"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/compang-details-bg.png"
				mode="">
			</image>
			<view class="projectDetails-header-content ff-bg-fff ff-border-radius-10">
				<view class="ff-font-16 ff-font-weight-600 ff-color-000 ff-margin-bottom-5">
					{{ projectDetailsInfo.projectName }}
				</view>
				<view class="ff-align-items-one ff-flex-wrap">
					<view class="ff-margin-right-10">
						<view v-if="projectDetailsInfo.status == 0" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已发布</view>
						<view v-if="projectDetailsInfo.status == 1" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已响应</view>
						<view v-if="projectDetailsInfo.status == 2" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已确认</view>
						<view v-if="projectDetailsInfo.status == 3" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;进行中</view>
						<view v-if="projectDetailsInfo.status == 4" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已结束</view>
						<view v-if="projectDetailsInfo.status == 5" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;待批准</view>
						<view v-if="projectDetailsInfo.status == 6" class="tips5 ff-font-12">项目状态&nbsp;|&nbsp;已解约</view>
						<view v-if="projectDetailsInfo.status == 9" class="tips5 ff-font-12">项目状态&nbsp;|&nbsp;已作废</view>
					</view>
					<view v-if="projectDetailsInfo.status == 3" class="ff-margin-right-10">
						<view v-if="projectDetailsInfo.maintenances[0].status == 0" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待维保</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 1" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;维保中</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 2" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待审核</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 3" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待签发</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 5" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;已完成</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 6" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;已驳回</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 7" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待指派</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 8" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待提交</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 9" class="tips5 ff-font-12">
							维保状态&nbsp;|&nbsp;已作废</view>
					</view>
					<view
						v-if="(projectDetailsInfo.status == 0 || projectDetailsInfo.status == 1) && projectDetailsInfo.responseNum > 0"
						class="tips3 ff-font-12 ff-margin-right-10">
						已有{{ projectDetailsInfo.responseNum }}家单位响应
					</view>
					<view v-if="projectDetailsInfo.rescissionStatus == 1"
						class="tips4 ff-color-fff ff-font-12 ff-margin-right-10">解约确认中</view>
					<view v-if="projectDetailsInfo.status == 3">
						<view v-if="projectDetailsInfo.maintenances[0].status != 9">
							<view
								v-if="projectDetailsInfo.maintenances[0].status == 5 && projectDetailsInfo.doneNumber > 0"
								class="tips3 ff-font-12">
								已完成{{ projectDetailsInfo.doneNumber }}次执业</view>
							<view
								v-else-if="projectDetailsInfo.maintenances[0].status == 7 && projectDetailsInfo.maintenceNum > 0"
								class="tips3 ff-font-12">
								正在进行第{{ projectDetailsInfo.maintenceNum }}次指派</view>
							<view v-else>
								<view v-if="projectDetailsInfo.maintenceNum > 0" class="tips3 ff-font-12">
									正在进行第{{ projectDetailsInfo.maintenceNum }}次执业</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ff-font-13 projectDetails-header-content-address">
					技术服务单位：{{ projectDetailsInfo.maintenances[0].orgName || '/' }}</view>
				<view class="ff-font-13 projectDetails-header-content-time">
					更新于：{{ projectDetailsInfo.modified == null ? '/' : projectDetailsInfo.modified.substr(0, projectDetailsInfo.modified.length - 3) }}
				</view>
				<view
					:class="{ oneBUt: projectDetailsInfo.rescissionStatus !== 0 && projectDetailsInfo.rescissionStatus !== 1 && projectDetailsInfo.rescissionStatus !== 2 }"
					class="projectDetails-header-content-but ff-flex-around ff-margin-top-20 ff-margin-bottom-5">
					<u-button v-if="projectDetailsInfo.rescissionStatus == 0" @click="launchRescindClick" type="primary"
						size="medium" plain>解约合同</u-button>
					<view v-if="projectDetailsInfo.rescissionStatus==1">
						<u-button v-if="projectDetailsInfo.rescissionPromoterStatus == 1" @click="cancelRescindClick"
							size="medium" plain>取消解约</u-button>
						<u-button v-else @click="confirmRescindClick" size="medium" plain>确定解约</u-button>
					</view>
					<u-button v-if="projectDetailsInfo.rescissionStatus == 2" size="medium" plain>解约完成</u-button>
					<u-button @click="detailsClick" type="primary" size="medium">查看项目详情</u-button>
				</view>
				<view v-if="projectDetailsInfo.rescissionStatus == 1">
					<view v-if="projectDetailsInfo.rescissionPromoterStatus == 1"
						class="projectDetails-header-content-noResult ff-align-items-one ff-line-height-1-3 ff-font-13 ff-border-radius-5 ff-padding-10">
						<view><u-icon name="info-circle" color="#FF0000" size="43"></u-icon></view>
						<view class="ff-margin-left-5">您已申请解约合同，需要对方同意。如有问题，请联系对方负责人！</view>
					</view>
					<view v-if="projectDetailsInfo.rescissionPromoterStatus == 2"
						class="projectDetails-header-content-noResult ff-align-items-one ff-line-height-1-3 ff-font-13 ff-border-radius-5 ff-padding-10">
						<view><u-icon name="info-circle" color="#FF0000" size="43"></u-icon></view>
						<view class="ff-margin-left-5">请注意，服务机构已对本项目发起解约申请，如有异议，请尽快与服务机构联系。</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ff-margin-top-1">
			<!-- :class="[ projectDetailsInfo.rescissionStatus == 1 ?'activeh3':projectDetailsInfo.rescissionStatus == 2 ?'activeh2':'activeh1' ]" -->
			<!-- 解约记录 -->
			<view class="projectDetails-termrecord ff-bg-fff ff-border-radius-10"
				v-if="projectDetailsInfo.rescissionStatus != 0">
				<view class="ff-font-16 ff-font-weight-600">解约记录</view>
				<view>
					<view class="ff-flex">
						<view class="ff-color-999">发起方</view>
						<view>{{rescissionInfo.rescissionPromoteParty ||'--'}}</view>
					</view>
					<view class="ff-flex">
						<view class="ff-color-999">发起人</view>
						<view>{{rescissionInfo.rescissionPromoterName ||'--'}}</view>
					</view>
					<view class="ff-flex">
						<view class="ff-color-999">发起时间</view>
						<view>{{rescissionInfo.rescissionPromoteDate ||'--'}}</view>
					</view>
					<view class="ff-flex">
						<view class="ff-color-999">解约原因</view>
						<view style="width: 60%;">{{rescissionInfo.rescissionReason ||'--'}}</view>
					</view>
					<view class="ff-flex">
						<view class="ff-color-999">确认解约人</view>
						<view>{{rescissionInfo.rescissionConfirmName ||'--'}}</view>
					</view>
					<view class="ff-flex">
						<view class="ff-color-999">确认解约时间</view>
						<view>{{rescissionInfo.rescissionConfirmDate ||'--'}}</view>
					</view>
				</view>
			</view>
			<!-- 维保记录 -->
			<view class="projectDetails-content ff-bg-fff ff-border-radius-10 ">
				<!-- :class="{
					contentTop: projectDetailsInfo.rescissionStatus == 1 && projectDetailsInfo.mainNum > 0,
					contentTop: projectDetailsInfo.rescissionStatus != 1 && projectDetailsInfo.mainNum > 0,
					contentTop: projectDetailsInfo.rescissionStatus == 1 && projectDetailsInfo.mainNum < 1,
					activeh4: projectDetailsInfo.rescissionPromoterStatus == 0
				}" -->
				<view
					class="projectDetails-content-title ff-font-16 ff-font-weight-600 ff-color-111 ff-margin-bottom-16">
					维保记录
				</view>
				<view>
					<u-time-line>
						<u-time-line-item nodeTop="7" v-for="(item, index) of projectDetailsInfo.maintenances"
							:key="index">
							<template v-slot:content>
								<view>
									<view v-if="projectDetailsInfo.maintenances">
										<view class="ff-margin-bottom-15 reportTime ff-font-13"
											v-if="projectDetailsInfo.maintenances.length > 0">
											第{{ projectDetailsInfo.maintenances.length - index }}次维保，开始时间：{{ item.startTime != null ? item.startTime : '/' }}
										</view>
									</view>
									<view v-if="item.status == 5" class="reportBut ff-margin-bottom-18">
										<u-button @click.stop="vieWReport(item)" type="warning" size="medium"
											plain>查看报告书</u-button>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="7">
							<template v-slot:content>
								<view>
									<view class="reportTime ff-font-13">
										<text class="ff-margin-right-5">响应成功：</text>
										{{ projectDetailsInfo.contractTime }}
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>

		</view>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<!-- 解约合同弹框 -->
		<u-modal v-model="terminationModal" title="请输入解约原因" show-cancel-button="true"
			:content-style="{ 'line-height': '1.5' }" @cancel="terminationCancel" @confirm="terminationConfirm">
			<view class="slot-content ff-padding-15">
				<view class="ff-font-13 ff-margin-bottom-10">发起解约后，需要等对方单位人同意后，方可解约成功。解约成功后的项目不可再进行维保。</view>
				<textarea v-model.trim="rescissionReason" maxlength="-1"
					class="ff-border-radius-5 ff-padding-5 ff-font-14" placeholder="*请输入"></textarea>
			</view>
		</u-modal>
		<!-- 确认解约合同弹框 -->
		<u-modal v-model="confirmRescindModal" show-cancel-button="true" @confirm="confirmRescindConfirm" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="项目解约后，不再支持任何操作。如有正在执业的人员，也将被强制暂停，请确认是否解约?" />
		<!-- 取消解约合同弹框 -->
		<u-modal v-model="cancelRescindModal" show-cancel-button="true" @confirm="cancelRescindConfirm" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="请确认是否取消解约合同？" />
		<!-- 报告书弹框 -->
		<u-modal v-model="reportModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="报告书正在生成，请稍后查看!" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'projectMaintenanceRecord',
		data() {
			return {
				rescissionInfo: {}, // 解约记录数据
				confirmRescindModal: false, // 确认解约合同显隐（单位发起）
				cancelRescindModal: false, // 取消解约合同弹窗显隐(机构发起的)
				rescissionReason: '', // 解约原因
				terminationModal: false, // 机构发起解约--弹窗显/隐
				locationModal: false, // 定位失败弹框显/隐
				rescindModal: false, // 解约弹框显/隐
				reportModal: false, // 报告书弹框显/隐
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				// 获取项目详情页请求的参数
				params: {
					projectId: '',
					longitude: '',
					latitude: ''
				},
				projectDetailsInfo: {} // 项目详情页数据
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			let that = this;
			that.params.projectId = e.id;
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getprojectDetails(); // 获取项目详情页数据
				},
				fail() {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		methods: {
			// 获取项目详情页数据
			async getprojectDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: '/project/user/detailV2',
					data: this.params
				});
				// console.log('获取项目详情页数据------', data);
				if (data.code == 200) {
					this.projectDetailsInfo = data.data;
					if (this.projectDetailsInfo.rescissionStatus != 0) {
						this.getRescissionInfo(this.params.projectId) // 获取解约合同信息
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 获取解约合同信息
			async getRescissionInfo(id) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/project/rescission/info/${id}`
				});
				// console.log('获取解约合同的数据------', data);
				if (data.code == 200) {
					this.rescissionInfo = data.data;
				}
				this.$refs.loading.closeLoading();
			},
			// 发起解约--------单位
			launchRescindClick() {
				this.terminationModal = true
			},
			// 发起解约--------单位：确定
			async terminationConfirm() {
				if (!this.rescissionReason) {
					this.$refs.uToast.show({
						title: '请输入解约原因',
						type: 'error'
					});
					this.terminationModal = true
					return
				}
				this.$refs.loading.openLoading('解约中···');
				const data = await this.$http.post({
					url: `/project/rescissionV2`,
					data: {
						projectId: this.params.projectId,
						rescissionReason: this.rescissionReason
					}
				});
				// console.log('单位解约合同）-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getprojectDetails(); // 获取项目详情页数据
				} else {
					uni.showModal({
						title: '温馨提醒',
						content: data.msg,
						showCancel: false,
						confirmColor: '#3178FF',
						success: res => {
							if (res.confirm) {}
						}
					})
				}
				this.$refs.loading.closeLoading();
			},
			// 发起解约--------机构：取消
			terminationCancel() {
				this.terminationModal = false
				this.rescissionReason = ''
			},
			// 取消解约---单位发起
			cancelRescindClick() {
				this.cancelRescindModal = true
			},
			// 取消解约---单位发起：确定
			async cancelRescindConfirm() {
				this.$refs.loading.openLoading('取消中···');
				const data = await this.$http.post({
					url: `/project/cancelRescissionV2/${this.params.projectId}`
				});
				// console.log('取消解约-合同-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getprojectDetails(); // 获取项目详情页数据
				} else {
					uni.showModal({
						title: '温馨提醒',
						content: data.msg,
						showCancel: false,
						confirmColor: '#3178FF',
						success: res => {
							if (res.confirm) {}
						}
					})
				}
				this.$refs.loading.closeLoading();
			},
			// 确定---解约合同（单位发起的）
			confirmRescindClick() {
				this.confirmRescindModal = true;
			},
			// 确定---解约合同（机构发起的）
			async confirmRescindConfirm() {
				this.$refs.loading.openLoading('解约中···');
				const data = await this.$http.post({
					url: `/project/rescission/confirmV2/${this.params.projectId}`
				});
				// console.log('确定---解约合同（机构发起的）-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getprojectDetails(); // 获取项目详情页数据
				} else {
					uni.showModal({
						title: '温馨提醒',
						content: data.msg,
						showCancel: false,
						confirmColor: '#3178FF',
						success: res => {
							if (res.confirm) {}
						}
					})
				}
				this.$refs.loading.closeLoading();
			},

			// 跳转详细的项目详情页数据
			detailsClick() {
				this.$pageJump.navigateTo('/pages/maintenance/company/home/components/details/projectDetails?id=' + this
					.params.projectId);
			},
			// 跳转到报告书页面
			vieWReport(item) {
				if (item.reportQrcodeUrl != '' && item.reportQrcodeUrl != null) {
					this.$pageJump.navigateTo('/pages/maintenance/company/home/components/details/Report?id=' + item.id);
				} else {
					this.reportModal = true; // 提示无法查看报告书
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	@import './components/projectDetails.scss';

	.oneBUt {
		/deep/.u-btn--primary {
			padding: 0 180rpx !important;
		}
	}

	.projectDetails {
		&-header {
			position: inherit !important;
			padding: 30rpx 0;

			&-content {
				margin: 0 24rpx 30rpx;

				&-but {
					/deep/.u-size-medium {
						font-size: 26rpx;
						height: 75rpx;
						line-height: 75rpx;
						letter-spacing: 3rpx;
					}
				}

				&-noResult {
					margin-top: 30rpx !important;
					background-color: #ffebeb;
					color: #ff0000;
				}
			}
		}
	}

	.contentTop {
		margin: 20rpx 24rpx 80rpx !important;
	}

	.contentTop1 {
		margin: 457rpx 24rpx 80rpx !important;
	}

	.contentTop2 {
		margin: 547rpx 24rpx 80rpx !important;
	}

	.projectDetails-content {
		// max-height: 700rpx;
		// overflow-y: auto;
		margin: 24rpx 24rpx 0 !important;
		padding: 30rpx 40rpx;
		// margin-top: 0;

		/deep/.u-time-axis.data-v-bd98783e::before {
			border-left: 1px dashed #b5b5b5 !important;
		}

		/deep/.u-dot.data-v-dba4c432 {
			background: #b5b5b5;
		}

		.reportTime {
			color: #aaaaaa;
		}

		.reportBut {
			/deep/.u-btn--warning--plain.data-v-3bf2dba7 {
				color: #3178ff !important;
				border-color: #3178ff !important;
				background-color: #f5f8ff !important;
			}
		}
	}

	textarea {
		width: 92%;
		border: 2rpx solid #999;
		height: 200rpx;
	}

	.activeh1 {
		margin: 468rpx 0 0;
	}

	.activeh2 {
		margin: 419rpx 0 0;
	}

	.activeh3 {
		margin-top: 603rpx !important;
	}

	.activeh4 {
		margin-top: 610rpx !important;
	}

	.projectDetails {
		height: 100vh;
		overflow-y: auto;
	}

	.projectDetails-contract {
		margin: 24rpx;
	}

	.projectDetails-termrecord {
		padding: 30rpx 40rpx 10rpx;
		margin: 20rpx 24rpx 0;
		background-image: linear-gradient(#FFEBEB 13%, #ffffff 35%);

		.ff-font-16 {
			color: #F31C01;
			margin-bottom: 30rpx;
		}

		.ff-flex {
			margin-bottom: 20rpx;

			.ff-color-999 {
				width: 221rpx;
			}
		}

	}

	.ff-margin-top-1 {
		margin-top: -50rpx;
	}
</style>